<!-- 主题设置抽屉 -->
<template>
  <a-drawer
    class="property-dialog"
    :visible="visible"
    :title="getTitle"
    :mask="false"
    :maskClosable="false"
    width="500px"
    :get-container="false"
    :z-index="1001"
    :style="{ position: 'absolute', padding: '0px' }"
    @update:visible="updateVisible"
  >
    <div>
      <startProperty
        v-if="nodeData?.type === 'start'"
        title="开始"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <classifierProperty
        v-if="nodeData?.type === 'classifier'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <llmProperty v-if="nodeData?.type === 'llm'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
      <endProperty v-if="nodeData?.type === 'end'" :title="title" :nodeData="nodeData" :lf="lf" :flowDetail="flowDetail" @closed="closed" />
      <knowledgeProperty
        v-if="nodeData?.type === 'knowledge'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <replyProperty
        v-if="nodeData?.type === 'reply'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <switchProperty
        v-if="nodeData?.type === 'switch'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <codeProperty
        v-if="nodeData?.type === 'code'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
      <enhanceJavaProperty
        v-if="nodeData?.type === 'enhanceJava'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
 <httpProperty
        v-if="nodeData?.type === 'http'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
       <dbQueryProperty
        v-if="nodeData?.type === 'dbquery'"
        :title="title"
        :nodeData="nodeData"
        :lf="lf"
        :flowDetail="flowDetail"
        @closed="closed"
      />
    </div>
  </a-drawer>
</template>

<script setup>
import { computed } from 'vue';
import startProperty from '../registernode/start/startProperty.vue';
import classifierProperty from '../registernode/classifier/classifierProperty.vue';
import llmProperty from '../registernode/llm/llmProperty.vue';
import endProperty from '../registernode/end/endProperty.vue';
import knowledgeProperty from '../registernode/knowledge/knowledgeProperty.vue';
import replyProperty from '../registernode/reply/replyProperty.vue';
import switchProperty from '../registernode/switch/switchProperty.vue';
import codeProperty from '../registernode/code/codeProperty.vue';
import enhanceJavaProperty from '../registernode/enhanceJava/enhanceJavaProperty.vue';
import httpProperty from '../registernode/http/httpProperty.vue';
import dbQueryProperty from '../registernode/dbQuery/dbQueryProperty.vue';
const props = defineProps({
  visible: {
    // drawer 是否显示, v-model
    type: Boolean
  },
  //标题
  title: {
    type: String,
    default: ''
  },
  nodeData: Object,
  lf: Object,
  //详情
  flowDetail: {
    type: Object,
    default: () => {
      return {};
    }
  }
});
const emit = defineEmits(['update:visible']);

const getTitle = computed(() => {
  return props.nodeData?.properties?.text;
  // return props.nodeData?.properties?.text;
  // if(props.nodeData.properties.text) {
  //   return '开始节点';
  // }
  // if(props.nodeData.type === 'llm') {
  //   return '大模型';
  // }
  // if(props.nodeData.type === 'classifier') {
  //   return '分类器';
  // }
  // return props.title || '节点属性';
});

const updateVisible = value => {
  emit('update:visible', value);
};
</script>

<style lang="less">
.property-dialog {
  .ant-drawer-body {
    padding: 12px;
  }
  .ant-drawer-content {
    height: 100%;
    overflow: hidden;
  }
}
</style>
